<template>
  <!-- 维度成员页面 -->
  <div>
    <!-- 操作区域 -->
    <upper-template
      @search="searchFunc"
      exportIcon
      @clear="
        (searchForm.dictCode = ''),
          (searchForm.dictName = ''),
          (searchForm.sourceType = '')
      "
    >
      <!-- 操作按钮区 -->
      <template slot="buttonArea">
        <el-button type="normal" @click="addFunc">新增</el-button>
        <el-button type="normal" @click="editFunc">编辑</el-button>
        <el-button type="normal" @click="deleteFunc">删除</el-button>
        <el-button type="normal" @click="configFun">配置成员</el-button>
        <el-button type="normal" @click="viewConfigFun">查看成员</el-button>
      </template>
      <!-- 搜索区 -->
      <template slot="searchArea">
        <el-form
          :model="searchForm"
          ref="searchForm"
          label-width="80px"
          label-position="right"
          size="mini"
        >
          <el-form-item label="编码：" prop="dictCode">
            <el-input
              v-model="searchForm.dictCode"
              style="width:150px"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称：" prop="dictName">
            <el-input
              v-model="searchForm.dictName"
              style="width:150px"
            ></el-input>
          </el-form-item>
          <el-form-item label="属性：" prop="sourceType">
            <el-select
              v-model="searchForm.sourceType"
              placeholder="请选择"
              style="width:150px"
              clearable=""
            >
              <el-option
                v-for="item in sourceTypeList"
                :key="item.value"
                :value="item.value"
                :label="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
      <!-- 显示隐藏区 -->
      <template slot="columnHide">
        <el-checkbox-group v-model="checkList">
          <el-checkbox
            v-for="item in textData"
            :label="item.label"
            :key="item.prop"
            :disabled="item.hideDisable"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </template>
    </upper-template>
    <el-table ref="multipleTable" :data="tableData" style="width: 100%">
      <el-table-column
        width="55"
        type="selection"
        fixed="left"
      ></el-table-column>
      <el-table-column label="编码" prop="dictCode" v-if="tablePick[0]"></el-table-column>
      <el-table-column label="名称" prop="dictName" v-if="tablePick[1]"></el-table-column>
      <el-table-column label="描述" prop="descn" v-if="tablePick[2]"></el-table-column>
      <el-table-column label="属性" prop="sourceType" v-if="tablePick[3]">
          <template slot-scope="scope">
              <div style="color:red" v-if="scope.row.sourceType=='U'">
                  {{$getLabel(scope.row.sourceType,sourceTypeList)}}
              </div>
              <div v-else>
                  {{$getLabel(scope.row.sourceType,sourceTypeList)}}
              </div>
          </template>
      </el-table-column>
      <el-table-column label="创建人" prop="creator" v-if="tablePick[4]"></el-table-column>
      <el-table-column label="创建时间" prop="createdTm" v-if="tablePick[5]">
          <template slot-scope="scope">
              {{timeFormat(scope.row.createdTm)}}
          </template>
      </el-table-column>
      <el-table-column label="修改人" prop="modifier" v-if="tablePick[6]"></el-table-column>
      <el-table-column label="修改时间" prop="modifiedTm" v-if="tablePick[7]">
           <template slot-scope="scope">
              {{timeFormat(scope.row.modifiedTm)}}
          </template>
      </el-table-column>
    </el-table>
    <!-- 主表分页 -->
     <pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchForm.page"
            :pager-count="7"
            :total="40"
          ></pagination>
        <!-- 新增/编辑弹窗 -->
    <el-dialog v-dialogDrag :title="saveFlg=='1'?'新增维度':'编辑维度'" :visible.sync="addOrEdit" width="514px" top="2%">
      <el-form
        :model="saveForm"
        ref="saveForm"
        label-width="61px"
        label-position="left"
        :rules="saveFormRules"
      >
        <el-form-item label="编码：" prop="dictCode">
          <el-input
            v-model="saveForm.dictCode"
            :disabled="saveFlg!=1"
            placeholder="请输入编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称：" prop="dictName">
          <el-input v-model="saveForm.dictName" 
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="属性：" prop="sourceType" >
          <el-select v-model="saveForm.sourceType" style="width:100%" disabled>
             <el-option v-for="item in sourceTypeList"
                       :key="item.value"
                       :value="item.value"
                       :label="item.label"
                       ></el-option>
                        
          </el-select>
        </el-form-item>
         <el-form-item label="描述：" prop="descn">
          <el-input v-model="saveForm.descn"  type="textarea"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="addOrEdit = false">确 定</el-button>
        <el-button @click="addOrEdit = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 配置/查看 成员弹窗 -->
    <el-dialog v-dialogDrag :title="configFlg==1?'配置成员':'查看成员'" :visible.sync="isConfigDialog" width="60%" >
      <!-- 操作区域 -->
    <upper-template
      @search="searchFuncConf"
      exportIcon importIcon
      @clear="
        (searchFormConf.dictItemCode = ''),
          (searchFormConf.dictItemName = '')
      "
    >
      <!-- 操作按钮区 -->
      <template slot="buttonArea">
        <el-button type="normal" @click="addFuncConf" v-if="configFlg!=2">新增</el-button>
        <el-button type="normal" @click="editFuncConf" v-if="configFlg!=2">编辑</el-button>
        <el-button type="normal" @click="deleteFuncConf" v-if="configFlg!=2">删除</el-button>
        <el-button type="normal" @click="viewFunConf">查看</el-button>
      </template>
      <!-- 搜索区 -->
      <template slot="searchArea">
        <el-form
          :model="searchFormConf"
          ref="searchForm"
          label-width="80px"
          label-position="right"
          size="mini"
        >
          <el-form-item label="编码：" prop="dictCode">
            <el-input
              v-model="searchFormConf.dictItemCode"
              style="width:150px"
            ></el-input>
          </el-form-item>
          <el-form-item label="名称：" prop="dictName">
            <el-input
              v-model="searchFormConf.dictItemName"
              style="width:150px"
            ></el-input>
          </el-form-item>
        </el-form>
      </template>
      <!-- 显示隐藏区 -->
      <template slot="columnHide">
        <el-checkbox-group v-model="checkListConf">
          <el-checkbox
            v-for="item in textDataConf"
            :label="item.label"
            :key="item.prop"
            :disabled="item.hideDisable"
            >{{ item.label }}</el-checkbox
          >
        </el-checkbox-group>
      </template>
    </upper-template>
    <!-- 成员表格展示区 -->
        <el-table ref="configTable" :data="tableDataConf">
             <el-table-column
        width="55"
        type="selection"
        fixed="left"
      ></el-table-column>
      <el-table-column label="编码" prop="dictItemCode" v-if="tablePickConf[0]"></el-table-column>
      <el-table-column label="名称" prop="dictItemName" v-if="tablePickConf[1]"></el-table-column>
      <el-table-column label="是否叶子节点" prop="isLeaf" v-if="tablePickConf[2]">
          <template slot-scope="scope">
              <div style="color:red" v-if="scope.row.isLeaf=='0'">
                  {{$getLabel(scope.row.isLeaf,isLeafList)}}
              </div>
              <div v-else>
                  {{$getLabel(scope.row.isLeaf,isLeafList)}}
              </div>
          </template>
      </el-table-column>
      <el-table-column label="描述" prop="descn" v-if="tablePickConf[3]"></el-table-column>
      <el-table-column label="创建人" prop="creator" v-if="tablePickConf[4]"></el-table-column>
      <el-table-column label="创建时间" prop="createdTm" v-if="tablePickConf[5]">
          <template slot-scope="scope">
              {{timeFormat(scope.row.createdTm)}}
          </template>
      </el-table-column>
      <el-table-column label="修改人" prop="modifier" v-if="tablePickConf[6]"></el-table-column>
      <el-table-column label="修改时间" prop="modifiedTm" v-if="tablePickConf[7]">
           <template slot-scope="scope">
              {{timeFormat(scope.row.modifiedTm)}}
          </template>
      </el-table-column>
        </el-table>
        <!-- 成员表分页 -->
         <pagination
            @size-change="handleSizeChangeConf"
            @current-change="handleCurrentChangeConf"
            :current-page="searchFormConf.page"
            :pager-count="7"
            :total="40"
          ></pagination>
      <div slot="footer" class="dialog-footer">
          <!-- 空 -->
      </div>


      <!-- 配置成员弹窗中新增/编辑/查看弹窗 -->
    <el-dialog :title="saveConfFlg==1?'新增成员':(saveConfFlg==2?'编辑成员':'查看成员')" :visible.sync="addOrEditConf" width="514px" append-to-body>
        <el-form
        :model="saveFormConf"
        ref="saveFormConf"
        label-width="97px"
        label-position="left"
        :rules="saveFormRules"
        :disabled="saveConfFlg==3"
      >
        <el-form-item label="编码：" prop="dictItemCode">
          <el-input
            v-model="saveFormConf.dictItemCode"
            :disabled="saveConfFlg!=1"
            placeholder="请输入编码"
          ></el-input>
        </el-form-item>
        <el-form-item label="名称：" prop="dictItemName">
          <el-input v-model="saveFormConf.dictItemName" 
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否叶子：" prop="isLeaf" >
          <el-select v-model="saveFormConf.isLeaf" style="width:100%" >
             <el-option v-for="item in isLeafList"
                       :key="item.value"
                       :value="item.value"
                       :label="item.label"
                       ></el-option>
                        
          </el-select>
        </el-form-item>
         <el-form-item label="描述：" prop="descn">
          <el-input v-model="saveFormConf.descn"  type="textarea"
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
      </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addOrEditConf=false" v-if="saveConfFlg!=3">确认</el-button>
          <el-button @click="addOrEditConf=false" v-if="saveConfFlg!=3">取消</el-button>
          <el-button @click="addOrEditConf=false" v-if="saveConfFlg==3">关闭</el-button>
      </div>
    </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment"
export default {
  data() {
    return {
      addOrEdit: false, // 新增/编辑弹窗
      saveFlg: 1, // 1新增 2 编辑
      sourceTypeList: [
        { value: "U", label: "用户定义" },
        { value: "V", label: "系统内置" }
      ],
      searchForm: {
        page: 1,
        size: 15
      },
      // 主表列显示隐藏依据
      textData: [
        { prop: "dictCode", label: "编码", hideDisable: true },
        { prop: "dictName", label: "名称", hideDisable: true },
        { prop: "descn", label: "描述", hideDisable: true },
        { prop: "sourceType", label: "属性", hideDisable: true },
        { prop: "creator", label: "创建人" },
        { prop: "createdTm", label: "创建时间" },
        { prop: "modifier", label: "修改人" },
        { prop: "modifiedTm", label: "修改时间" }
      ],
      checkList: ["编码","名称","描述","属性","创建人","创建时间","修改人","修改时间",],
      // 主表数据
      tableData: [
        {
          creator: "dhliu",
          createdTm: 1566804260554,
          modifier: null,
          modifiedTm: null,
          dictCode: "treasurer",
          dictName: "自营或司库",
          descn: "用来标识自营业务或司库业务",
          sourceType: "U"
        },
        {
          creator: null,
          createdTm: null,
          modifier: "sysadmin",
          modifiedTm: 1545123611000,
          dictCode: "productCd",
          dictName: "产品",
          descn: "产品字段",
          sourceType: "V"
        },
        {
          creator: "sysadmin",
          createdTm: 1561038856576,
          modifier: null,
          modifiedTm: null,
          dictCode: "match_id",
          dictName: "匹配字段",
          descn: null,
          sourceType: "U"
        },
        {
          creator: "sysadmin",
          createdTm: 1545877812000,
          modifier: "sysadmin",
          modifiedTm: 1546495375000,
          dictCode: "VP_ALM_DIM_QZ",
          dictName: "债券种类",
          descn: "债券种类",
          sourceType: "U"
        },
        {
          creator: "sysadmin",
          createdTm: 1570673295000,
          modifier: "sysadmin",
          modifiedTm: 1591345927017,
          dictCode: "ProductCd",
          dictName: "产品IES",
          descn: "业务经营品种",
          sourceType: "V"
        },
        {
          creator: "sysadmin",
          createdTm: 1591345963447,
          modifier: null,
          modifiedTm: null,
          dictCode: "OrganUnit_IES",
          dictName: "机构IES",
          descn: null,
          sourceType: "U"
        },
        {
          creator: "sysadmin",
          createdTm: 1542790039000,
          modifier: "sysadmin",
          modifiedTm: 1545101772000,
          dictCode: "OrganUnit",
          dictName: "机构",
          descn: "用来标识分支机构",
          sourceType: "V"
        },
        {
          creator: "sysadmin",
          createdTm: 1542789957000,
          modifier: null,
          modifiedTm: null,
          dictCode: "Industry",
          dictName: "行业代码",
          descn: "用来标识投向行业",
          sourceType: "V"
        },
        {
          creator: "sysadmin",
          createdTm: 1586414193772,
          modifier: null,
          modifiedTm: null,
          dictCode: "H001",
          dictName: "国银租赁利润中心",
          descn: null,
          sourceType: "U"
        },
        {
          creator: "sysadmin",
          createdTm: 1542789851000,
          modifier: "sysadmin",
          modifiedTm: 1545728367000,
          dictCode: "GeneralLedger",
          dictName: "科目",
          descn: "用来标识交易的所属科目",
          sourceType: "V"
        }
      ],
      saveForm:{

      },
      saveFormRules:{
          dictCode: [
          { required: true, message: "请输入编码", trigger: "blur" }
        ],
         dictName: [
          { required: true, message: "请输入名称", trigger: "blur" }
        ],
         sourceType: [
          { required: true, message: "请选择属性", trigger: "blur" }
        ],
      },
    //   -----------------------------------------------------配置成员/查看成员 内的data-------------------------
      configFlg:1, //1配置成员 2 查看成员
      isConfigDialog:false,
      searchFormConf:{
        page:1,
        size:15
    },
    checkListConf:["编码","名称","是否叶子节点","描述","创建人","创建时间","修改人","修改时间",],
      // 成员表列显示隐藏依据
    textDataConf:[
        {prop:"dictItemCode",label:"编码", hideDisable: true },
        {prop:"dictItemName",label:"名称", hideDisable: true },
        {prop:"isLeaf",label:"是否叶子节点", hideDisable: true },// 0否 1是
        {prop:"descn",label:"描述"},
        {prop:"creator",label:"创建人"},
        {prop:"createdTm",label:"创建时间"},
        {prop:"modifier",label:"修改人"},
        {prop:"modifiedTm",label:"修改时间"},
    ],
    isLeafList:[{value:"1",label:"是"},{value:"0",label:"否"}],
    tableDataConf:[{"creator":"sys","createdTm":1591346021659,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839d4525042d","dictItemCode":"80000","dictItemName":"虚拟银行总行","descn":null,"isLeaf":"0","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346032494,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839d6f70042f","dictItemCode":"80100","dictItemName":"上海分行","descn":null,"isLeaf":"0","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346044083,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839d9cb40431","dictItemCode":"80101","dictItemName":"浦东支行","descn":null,"isLeaf":"1","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346054206,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839dc4400433","dictItemCode":"80102","dictItemName":"徐汇支行","descn":null,"isLeaf":"1","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346065372,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839defde0435","dictItemCode":"80103","dictItemName":"杨浦支行","descn":null,"isLeaf":"1","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346077063,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839e1d890437","dictItemCode":"80200","dictItemName":"河北分行","descn":null,"isLeaf":"0","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346089913,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839e4fbb0439","dictItemCode":"80201","dictItemName":"石家庄支行","descn":null,"isLeaf":"1","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346102167,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839e7f99043b","dictItemCode":"80202","dictItemName":"保定支行","descn":null,"isLeaf":"1","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346113655,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839eac78043d","dictItemCode":"80300","dictItemName":"北京分行","descn":null,"isLeaf":"0","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"},{"creator":"sys","createdTm":1591346125705,"modifier":null,"modifiedTm":null,"dictItemId":"40288dfd727474f20172839edb8a043f","dictItemCode":"80301","dictItemName":"国贸支行","descn":null,"isLeaf":"1","relatedDicttypeCode":{"creator":"sysadmin","createdTm":1591345963447,"modifier":null,"modifiedTm":null,"dictCode":"OrganUnit_IES","dictName":"机构IES","descn":null,"sourceType":"U"},"seq":null,"status":"1"}],
      saveConfFlg:1,//1新增成员 2编辑成员 3查看成员
      addOrEditConf:false,// 控制配置成员内新增/编辑/查看弹窗
      saveFormConf:{

      }
    };
  },
  created(){
  },
  computed: {
      tablePick(){
          return this.$tableDataPick(this.checkList,this.textData)
      },
      tablePickConf(){
          return this.$tableDataPick(this.checkListConf,this.textDataConf)
      }
  },
  methods: {
    //主表查询
    searchFunc() {},
    // 主表新增
    addFunc() {
      this.saveFlg = 1;
      for (let k in this.saveForm) {
        this.saveForm[k] = "";
      }
        this.saveForm.sourceType = 'U'
      this.addOrEdit = true;
    },
    // 主表编辑
    editFunc() {
      this.saveFlg = 2;
      let selection = this.$refs.multipleTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      this.saveForm = { ...row };
      this.addOrEdit = true;
    },
    // 主表删除
    deleteFunc() {
      let selection = this.$refs.multipleTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("你确认要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message.success("success");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 配置成员
    configFun(){
        this.configFlg = 1
      let selection = this.$refs.multipleTable.selection;
       if (selection.length < 1) {
        return this.$message.warning("请选择一条数据");
      } else if (selection.length > 1) {
        return this.$message.warning("只能选择一条数据");
      } else {
        this.isConfigDialog = true;
      }
    },
    // 查看成员
    viewConfigFun(){
        this.configFlg = 2
         let selection = this.$refs.multipleTable.selection;
       if (selection.length < 1) {
        return this.$message.warning("请选择一条数据");
      } else if (selection.length > 1) {
        return this.$message.warning("只能选择一条数据");
      } else {
        this.isConfigDialog = true;
      }
    },
    // 成员表查询
    searchFuncConf(){},
    // 成员表新增
    addFuncConf() {
      this.saveConfFlg = 1;
      for (let k in this.saveForm) {
        this.saveFormConf[k] = "";
      }
      this.addOrEditConf = true;
    },
    // 成员表编辑
    editFuncConf() {
      this.saveConfFlg = 2;
      let selection = this.$refs.configTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据进行修改");
      }
      let row = selection[0];
      this.saveFormConf = { ...row };
      this.addOrEditConf = true;
    },
    // 成员表查看按钮
    viewFunConf() {
      this.saveConfFlg = 3;
      let selection = this.$refs.configTable.selection;
      if (selection.length != 1) {
        return this.$message.warning("请选择一条数据");
      }
      let row = selection[0];
      this.saveFormConf = { ...row };
      this.addOrEditConf = true;
    },
    // 成员表删除
    deleteFuncConf() {
      let selection = this.$refs.configTable.selection;
      if (selection.length < 1) {
        return this.$message.warning("请选择要删除的数据");
      }
      this.$confirm("你确认要删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message.success("success");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    handleSizeChange(val) {
        this.searchForm.size= val
     },
    handleCurrentChange(val) {
        this.searchForm.page = val
      console.log(`当前页: ${val}`);
    },
     handleSizeChangeConf(val) {
        this.searchFormConf.size= val
     },
    handleCurrentChangeConf(val) {
        this.searchFormConf.page = val
      console.log(`当前页: ${val}`);
    },
    timeFormat(val){
        return val?moment(val).format('YYYY-MM-DD'):""
    }
  }
};
</script>

<style lang="scss" scoped>
</style>